<template>
  <!-- 搜索框 -->
  <van-search v-model="value" show-action placeholder="请输入搜索关键词" @click="onSearch">
    <template #action>
      <div @click="onSearch">搜索</div>
    </template>
  </van-search>

  <van-notice-bar
    left-icon="volume-o"
    text="看一看望一望，不吃亏来不上当。买不买不要紧，主要了解新产品。东西又好又便宜，人人都能买得起。我在做你在看,站得远了你看不见。看不见看不着，净看人家后脑勺。几块钱毛毛雨，咱们都能买得起。几块钱不算多，买不了房子买不了车，旅游也到不了兴加坡。几块钱不算贵，买不了冰箱和冰柜，不用回家开家庭会。几块钱都不敢花，啥时侯能当上企业家。当不了家做不了主，只能给别人做保姆。买买买个宝，买货买个好,买鱼买个票，买狗买个叫，张三买马张三骑，你是没买干着急。这又不是狗皮膏药大力丸，骗了老张骗老韩。人人使人人用，平时想买不好碰。别犹豫别徘徊，犹豫徘徊你白来。机会不是天天有，该出手时就出手。错过今天好机会，价格就得贵几倍。"
  />

  <van-swipe :autoplay="3000" lazy-render class="swiper-picture">
    <van-swipe-item v-for="image in images" :key="image">
      <img :src="image" />
    </van-swipe-item>
  </van-swipe>

  <!-- 分类 -->

  <van-row justify="center" class="cartList">
    <van-col span="6" v-for="(item, index) in cartList" :key="item.id"
      ><van-image round width="2.2rem" height="2.2rem" :src="item.img" />
      <p>{{ item.title }}</p>
    </van-col>
  </van-row>

  <!-- <van-button type="primary" class="tab-btn" @click="$router.push('/login')" v-show="flag"
    >登录</van-button
  >
  <van-button type="primary" class="tab-btn" @click="$router.push('/reg')" v-show="flag"
    >注册</van-button
  >
 -->
  <!-- 商品列表 -->
  <!-- 设置垂直间距 -->
  <van-row :gutter="[20, 20]" class="list">
    <!-- <van-col
      span="12"
      v-for="item in listArr"
      :key="item.id"
      class="list-item"
      @click="$router.push('/detail?id=' + item.id)"
    >
      <img :src="item.coverImage" alt="" />
      <div class="van-ellipsis">{{ item.name }}</div>
      <div class="van-ellipsis">${{ item.price }}</div>
    </van-col> -->
    <div class="goods">
      <ul>
        <li v-for="(item, index) in listArr" :key="item.id" @click="goDeatil(item.id)">
          <div class="goods-top">
            <img :src="item.imgUrl" alt="" />
            <div class="goods-icon">
              <!-- <img :src="item.leftUrl" alt="" class="left" /> -->
              <img :src="item.rightUrl" alt="" class="right" />
            </div>
            <div class="goods-actor">
              <img :src="item.actor" alt="" />
              <span class="actorname">{{ item.actorname }}</span>
              <span class="actortag">{{ item.actortag }}</span>
            </div>
          </div>
          <div class="goods-bottom">
            <h3>{{ item.name }}</h3>
            <div class="price">
              <span class="fuhao">$</span>
              <span class="jine">{{ item.price }}</span>
              <span class="baoyou"><img :src="item.byUrl" alt="" /></span>
              <span class="xiaoliang">销量 {{ item.sales }}</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </van-row>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'

//商品详情
const goDeatil = (id) => {
  router.push({ path: '/detail', query: { id } })
}
let router = useRouter()
// 搜索框的值
let value = ref('')
const flag = ref(true)
function showButton() {
  if (localStorage.getItem('token')) {
    flag.value = false
  }
}
showButton()
// 轮播图的数据源
const images = ref([
  'https://img0.baidu.com/it/u=350417381,1197904111&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
  'https://img2.baidu.com/it/u=1149909134,872848958&fm=253&fmt=auto&app=138&f=JPEG?w=730&h=500',
  'https://img2.baidu.com/it/u=4208176124,120806039&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500',
  'https://img2.baidu.com/it/u=1852472504,1840881402&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
  'https://img1.baidu.com/it/u=3458598981,1373738271&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
  'https://img2.baidu.com/it/u=176441448,1751492499&fm=253&fmt=auto&app=138&f=JPEG?w=526&h=350',
])

// async function loadSwiperData() {
//   let swiperAPI = 'http://localhost:1337/api/v1/banners'
//   let r = await axios.get(swiperAPI)
//   console.log(r.data)
// }
// loadSwiperData()
// const listArr = ref([
// {
//   id: 1,
//   title: '商品1商品1商品1商品1商品1商品1商品1商品1商品1',
//   img: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
// },
// { id: 2, title: '商品1', img: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg' },
// { id: 3, title: '商品1', img: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg' },
// { id: 4, title: '商品1', img: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg' },
// { id: 5, title: '商品1', img: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg' },
// {
//   id: 1,
//   name: '初心如一',
//   actor: 'https://img02.hua.com/zhuanti/valentine/2025/9012676.png?a1',
//   actorname: '初心如一',
//   actortag: '爆单新品',
//   price: 199,
//   sales: 500,
//   imgUrl: 'https://img02.hua.com/zhuanti/valentine/2025/9012676.png?a1',
//   leftUrl: 'http://t14.baidu.com/it/u=1739560370,1441849695&fm=224&app=112&f=JPEG?w=500&h=500',
//   rightUrl:
//     'https://img2.baidu.com/it/u=3092446475,2772055955&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
//   byUrl: 'http://t14.baidu.com/it/u=1739560370,1441849695&fm=224&app=112&f=JPEG?w=500&h=500',
// },
// {
//   id: 2,
//   name: '甜美各式小夹子刘海小发卡',
//   actor: 'https://img02.hua.com/zhuanti/valentine/2025/9012794.png',
//   actorname: '小甜心',
//   actortag: '爆单女王',
//   price: '199',
//   sales: 500,
//   imgUrl: 'https://img02.hua.com/zhuanti/valentine/2025/9012794.png',
//   leftUrl: 'http://t14.baidu.com/it/u=1739560370,1441849695&fm=224&app=112&f=JPEG?w=500&h=500',
//   rightUrl:
//     'https://img2.baidu.com/it/u=3092446475,2772055955&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
//   byUrl: 'http://t14.baidu.com/it/u=1739560370,1441849695&fm=224&app=112&f=JPEG?w=500&h=500',
// },
// {
//   id: 3,
//   name: '甜美各式小夹子刘海小发卡',
//   actor: 'https://img02.hua.com/zhuanti/valentine/2025/9012792.png',
//   actorname: '小甜心',
//   actortag: '爆单女王',
//   price: '199',
//   sales: 500,
//   imgUrl: 'https://img02.hua.com/zhuanti/valentine/2025/9012792.png',
//   leftUrl: 'http://t14.baidu.com/it/u=1739560370,1441849695&fm=224&app=112&f=JPEG?w=500&h=500',
//   rightUrl:
//     'https://img2.baidu.com/it/u=3092446475,2772055955&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
//   byUrl: 'http://t14.baidu.com/it/u=1739560370,1441849695&fm=224&app=112&f=JPEG?w=500&h=500',
// },
// {
//   id: 4,
//   name: '甜美各式小夹子刘海小发卡',
//   actor: 'https://img01.hua.com/uploadpic/newpic/9012578.jpg_220x240.jpg',
//   actorname: '小甜心',
//   actortag: '爆单女王',
//   price: '199',
//   sales: 500,
//   imgUrl: 'http://images.jjjux.com/20230918175145_15260.jpg',
//   leftUrl: 'http://t14.baidu.com/it/u=1739560370,1441849695&fm=224&app=112&f=JPEG?w=500&h=500',
//   rightUrl:
//     'https://img2.baidu.com/it/u=3092446475,2772055955&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
//   byUrl: 'http://t14.baidu.com/it/u=1739560370,1441849695&fm=224&app=112&f=JPEG?w=500&h=500',
// },
// {
//   id: 5,
//   name: '甜美各式小夹子刘海小发卡',
//   actor: 'https://img01.hua.com/uploadpic/newpic/9012709.jpg_220x240.jpg',
//   actorname: '小甜心',
//   actortag: '爆单女王',
//   price: '199',
//   sales: 500,
//   imgUrl: 'http://images.jjjux.com/20230915114544_49119.jpg',
//   leftUrl: 'http://t14.baidu.com/it/u=1739560370,1441849695&fm=224&app=112&f=JPEG?w=500&h=500',
//   rightUrl:
//     'https://img2.baidu.com/it/u=3092446475,2772055955&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
//   byUrl: 'http://t14.baidu.com/it/u=1739560370,1441849695&fm=224&app=112&f=JPEG?w=500&h=500',
// },
// {
//   id: 6,
//   name: '甜美各式小夹子刘海小发卡',
//   actor: './images/s-6.webp',
//   actorname: '小甜心',
//   actortag: '爆单女王',
//   price: '199',
//   sales: 500,
//   imgUrl: 'https://img02.hua.com/zhuanti/valentine/2025/9012676.png?a1',
//   leftUrl: 'http://t14.baidu.com/it/u=1739560370,1441849695&fm=224&app=112&f=JPEG?w=500&h=500',
//   rightUrl:
//     'https://img2.baidu.com/it/u=3092446475,2772055955&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
//   byUrl: 'http://t14.baidu.com/it/u=1739560370,1441849695&fm=224&app=112&f=JPEG?w=500&h=500',
// },
// ])
import http from '@/utils/request.js'
const listArr = ref([])
onMounted(() => {
  listDate()
})
const listDate = async () => {
  // const res = await axios.get('/api/index')
  let res = await http.$axios({ url: '/api/index', method: 'get' })
  console.log(res)
  listArr.value = res.listArr
}

// 分类
// const cartList = ref([
// {
//   id: 1,
//   img: 'https://img1.baidu.com/it/u=1772458925,3413010708&fm=253&fmt=auto?w=500&h=500',
//   title: '植物大全',
// },
// {
//   id: 2,
//   img: 'https://img2.baidu.com/it/u=1030951222,2252347369&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
//   title: '大型盆栽',
// },
// {
//   id: 3,
//   img: 'http://t15.baidu.com/it/u=2146261718,2728764275&fm=224&app=112&f=JPEG?w=483&h=500',
//   title: '中型盆栽',
// },
// {
//   id: 4,
//   img: 'http://t14.baidu.com/it/u=1846020977,116899158&fm=224&app=112&f=JPEG?w=350&h=350',
//   title: '小型盆栽',
// },
// {
//   id: 5,
//   img: 'https://t13.baidu.com/it/u=4115216821,3381512181&fm=224&app=112&size=h200&n=0&f=JPEG&fmt=auto?sec=1737824400&t=db55ecc366e558e3d23605bf026b0f84',
//   title: '鲜花花艺',
// },
// {
//   id: 6,
//   img: 'https://img0.baidu.com/it/u=1801115510,510052292&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1737824400&t=43a88dc450bafe7a1ed9ba79e56457d0',
//   title: '多肉植物',
// },
// {
//   id: 6,
//   img: 'https://t14.baidu.com/it/u=4282700625,1498364516&fm=224&app=112&size=h200&n=0&f=JPEG&fmt=auto?sec=1737824400&t=28398e1ee5b489fec571e8600ea04fcf',
//   title: '菜籽',
// },
// {
//   id: 6,
//   img: 'https://img1.baidu.com/it/u=3846422059,3517810840&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
//   title: '园艺用品',
// },
// ])

//列表详情
// async function loadList() {
//   let productListAPI = 'http://localhost:1337/api/v1/products'
//   let page = 1
//   let per = 10
//   let r = await axios.get(productListAPI, { params: { page, per } })
//   console.log(r.data.data)
//   listArr.value = r.data.data
// }
// loadList()

const cartList = ref([])
onMounted(() => {
  fetchDate()
})
const fetchDate = async () => {
  // const res = await axios.get('/api/index')
  let res = await http.$axios({ url: '/api/index', method: 'get' })
  console.log(res)
  cartList.value = res.cartList
}

// 搜索框的值
//搜索函数
// function onSearch() {
//   console.log('搜索了', value.value)
//   //路由跳转搜索结果页面--把输入框的值传入到搜索页面
//   router.push('/search?word=' + value.value)
// }
const onSearch = () => {
  router.push('/search')
}
</script>
<style scoped>
.tab-btn {
  width: 187.5px;
}
.swiper-picture img {
  width: 100%;
  height: 6rem;
}
.list {
  width: 355px;
  margin: 0 auto;
}

.list-item img {
  width: 100%;
}
.cartList {
  text-align: center;
  margin-top: 15px;
  width: 100%;
  background-color: white;
  font-size: 0.35rem;
  box-sizing: border-box;
  display: flex;
  flex-flow: row wrap;
}

.cartList li {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  flex: 0 0 20%;
  margin: 0.3rem 0;
}

.cartList li img {
  width: 1.5rem;
  height: 1.5rem;
}

.cartList li span {
  margin-top: 0.1875rem;
  color: rgb(102, 102, 102);
}
.goods {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0.1875rem;
}

.goods ul {
  display: flex;
  flex-wrap: wrap;
}

.goods ul li {
  width: calc(50% - 0.25rem);
  border-radius: 0.3125rem;
  overflow: hidden;
  background-color: #fff;
  margin: 0.125rem;
  margin-bottom: 1rem;
}

.goods ul li .goods-top img {
  width: 100%;
  height: 6.125rem;
}

.goods ul li .goods-top {
  position: relative;
  height: 6.125rem;
}

.goods ul li .goods-top .goods-icon .left {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  width: 1.2rem;
  height: 1.1rem;
}

.goods ul li .goods-top .goods-icon .right {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 0.7rem;
  height: 0.7rem;
}

/* ---------商品图上方两个图片样式--------------- */
.goods ul li .goods-top .goods-actor {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.9375rem;
  padding: 0 0 0 0.3125rem;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.goods ul li .goods-top .goods-actor img {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  margin-right: 0.125rem;
}

.goods ul li .goods-top .goods-actor .actorname {
  font-size: 0.35rem;
  margin-right: 0.125rem;
  color: #fff;
}

.goods ul li .goods-top .goods-actor .actortag {
  font-size: 0.3rem;
  padding: 0 0.125rem;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border-radius: 0.0625rem;
}

/* ---------商品图下方个人信息样式--------------- */
.goods ul li .goods-bottom {
  width: 100%;
  padding: 0.1875rem;
  box-sizing: border-box;
 
}

.goods ul li .goods-bottom h3 {
 font-size: 0.359rem;
    font-weight: 100;
    /* width: 2rem; */
    width: 4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



.goods ul li .goods-bottom .price {
  width: 100%;
  height: 0.625rem;
  position: relative;
  margin-bottom: 0.3125rem;
}

.goods ul li .goods-bottom .price .fuhao {
  font-size: 0.375rem;
  color: #f46;
}

.goods ul li .goods-bottom .price .jine {
  font-size: 0.4rem;
  color: #f46;
}

.goods ul li .goods-bottom .price .baoyou img {
  width: 0.6875rem;
  height: 0.375rem;
  margin-left: 0.1875rem;
}

.goods ul li .goods-bottom .price .xiaoliang {
  padding: 0.0625rem 0.125rem;
  font-size: 0.3125rem;
  background-color: #ffecef;
  color: #f46;
  position: absolute;
  right: 0;
  top: 0.4rem;
  border-radius: 0.3125rem;
}
</style>
